<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('响应计划详情')">
    <!-- 页面特定样式将由通用头部替代 -->
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>响应计划详情</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/list}" class="text-decoration-none">风险列表</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/{id}(id=${risk.id})}" class="text-decoration-none">风险详情</a></li>
                        <li class="breadcrumb-item active" aria-current="page">响应计划详情</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">基本信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>计划名称：</strong> <span th:text="${response.name}"></span></p>
                                <p><strong>相关风险：</strong> <a th:href="@{/risk/{id}(id=${risk.id})}" th:text="${risk.title}"></a></p>
                                <p><strong>负责人：</strong> <span th:text="${responsible != null ? responsible.realName : '未分配'}"></span></p>
                                <p th:if="${risk.level != null}"><strong>风险级别：</strong> 
                                    <span th:if="${risk.level == 1}">低</span>
                                    <span th:if="${risk.level == 2}">中</span>
                                    <span th:if="${risk.level == 3}">高</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>状态：</strong>
                                    <span th:if="${response.status == 1}" class="badge badge-secondary">未开始</span>
                                    <span th:if="${response.status == 2}" class="badge badge-primary">进行中</span>
                                    <span th:if="${response.status == 3}" class="badge badge-success">已完成</span>
                                    <span th:if="${response.status == 4}" class="badge badge-danger">已逾期</span>
                                </p>
                                <p><strong>创建时间：</strong> <span th:text="${#dates.format(response.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
                                <p><strong>最后更新：</strong> <span th:text="${#dates.format(response.updateTime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">时间安排</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>计划开始时间：</strong> <span th:text="${#dates.format(response.expectedStartTime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
                        <p><strong>计划结束时间：</strong> <span th:text="${#dates.format(response.expectedEndTime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
                        <p><strong>实际完成时间：</strong> 
                            <span th:if="${response.actualEndTime != null}" th:text="${#dates.format(response.actualEndTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                            <span th:if="${response.actualEndTime == null}">尚未完成</span>
                        </p>
                        <div class="progress mt-3">
                            <div th:if="${response.status == 1}" class="progress-bar bg-secondary" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            <div th:if="${response.status == 2}" class="progress-bar bg-primary" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                            <div th:if="${response.status == 3}" class="progress-bar bg-success" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
                            <div th:if="${response.status == 4}" class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">已逾期</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">响应计划描述</h5>
                    </div>
                    <div class="card-body">
                        <div class="p-3 bg-light rounded">
                            <p th:text="${response.description}" style="white-space: pre-line;"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-3" sec:authorize="hasAnyRole('ADMIN', 'MANAGER')">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">管理选项</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>更新状态:</label>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-secondary" onclick="updateStatus(1)" th:disabled="${response.status == 1}">未开始</button>
                                        <button type="button" class="btn btn-primary" onclick="updateStatus(2)" th:disabled="${response.status == 2}">进行中</button>
                                        <button type="button" class="btn btn-success" onclick="markAsCompleted()" th:disabled="${response.status == 3}">已完成</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <a th:href="@{/risk-response/edit/{id}(id=${response.id})}" class="btn btn-primary ml-2">
                                    <i class="fa fa-edit"></i> 编辑
                                </a>
                                <button type="button" class="btn btn-danger ml-2" onclick="confirmDelete()">
                                    <i class="fa fa-trash"></i> 删除
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col">
                <a th:href="@{/risk/{id}(id=${risk.id})}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> 返回风险详情
                </a>
            </div>
        </div>
    </div>
    
    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>确定要删除此响应计划吗？此操作不可恢复！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 完成时间输入模态框 -->
    <div class="modal fade" id="completionModal" tabindex="-1" role="dialog" aria-labelledby="completionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="completionModalLabel">标记为已完成</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="actualEndTime">实际完成时间:</label>
                        <input type="datetime-local" class="form-control" id="actualEndTime">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" id="confirmCompletionBtn" class="btn btn-success">确认</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        // 确认删除对话框
        function confirmDelete() {
            $('#deleteModal').modal('show');
        }
        
        // 标记为已完成
        function markAsCompleted() {
            // 设置当前时间为默认完成时间
            const now = new Date();
            const formattedNow = now.toISOString().slice(0, 16);
            $('#actualEndTime').val(formattedNow);
            
            $('#completionModal').modal('show');
        }
        
        // 更新状态
        function updateStatus(status) {
            if (confirm('确定要更新响应计划状态吗？')) {
                const responseId = /*[[${response.id}]]*/ '0';
                $.ajax({
                    url: '/risk-management/risk-response/status/' + responseId + '/' + status,
                    type: 'POST',
                    success: function(response) {
                        if (response.code === 200) {
                            // 重新加载页面
                            location.reload();
                        } else {
                            alert(response.message || '更新状态失败');
                        }
                    },
                    error: function() {
                        alert('系统错误，请稍后再试');
                    }
                });
            }
        }
        
        $(document).ready(function() {
            // 删除响应计划
            $('#confirmDeleteBtn').click(function() {
                const responseId = /*[[${response.id}]]*/ '0';
                const riskId = /*[[${risk.id}]]*/ '0';
                
                $.ajax({
                    url: '/risk-management/risk-response/delete/' + responseId,
                    type: 'POST',
                    success: function(response) {
                        if (response.code === 200) {
                            // 删除成功，跳转回风险详情页
                            window.location.href = '/risk-management/risk/' + riskId;
                        } else {
                            alert(response.message || '删除失败');
                        }
                    },
                    error: function() {
                        alert('系统错误，请稍后再试');
                    }
                });
            });
            
            // 确认完成按钮点击事件
            $('#confirmCompletionBtn').click(function() {
                const actualEndTime = $('#actualEndTime').val();
                if (!actualEndTime) {
                    alert('请选择实际完成时间');
                    return;
                }
                
                const responseId = /*[[${response.id}]]*/ '0';
                
                // 发送更新实际完成时间的请求
                $.ajax({
                    url: '/risk-management/risk-response/actual-end-time/' + responseId,
                    type: 'POST',
                    data: { actualEndTime: new Date(actualEndTime).toISOString() },
                    success: function(response) {
                        if (response.code === 200) {
                            // 关闭模态框
                            $('#completionModal').modal('hide');
                            // 重新加载页面
                            location.reload();
                        } else {
                            alert(response.message || '更新失败');
                        }
                    },
                    error: function() {
                        alert('系统错误，请稍后再试');
                    }
                });
            });
        });
    </script>
</body>
</html> 